<script lang="ts" setup>
// @ts-ignore
let props = defineProps({
    title: '' as any,
    desc: '' as any,
    image: '' as any
});
</script>
<template>
    <section class="fqxk-card">
        <div class="fqxk-card-item">
            <div class="fqxk-card-box">
                <div class="fqxk-card-icon">
                    <img :src="props.image"
                         alt="" class="fqxk-card-icon-img"
                         data-ll-status="loaded">
                </div>
                <h5 class="fqxk-card-h2">{{ props.title }}</h5>
                <div class="fqxk-card-secondary">
                    {{ props.desc }}
                </div>
                <slot name="other"/>
            </div>
        </div>
    </section>
</template>
<style scoped>
.fqxk-card{
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 25%;
}
.fqxk-card{
    max-width: 100%;
    padding-right: calc(var(--fqxk-x)* .5);
    padding-left: calc(var(--fqxk-x)* .5);
    margin-top: var(--fqxk-y);
}
.fqxk-card-item{
    display: flex;
    flex: 1 1 auto;
    padding: 1rem;
    min-height: 12rem;
    border: 2px solid var(--s-bg);
    background: var(--s-bg,rgb(0 0 0 / .025));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    transition: all 0.2s;
}
.fqxk-card-box{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}
.fqxk-card-icon-img{
    width: 3.5rem;
    height: 3.5rem;
}
.fqxk-card-secondary{
    color: hsl(var(--font-color) / .5);
    margin: .5em 0 0;
}

@media (max-width: 1152px) {
    .fqxk-card{
        width: 100%;
    }
}
</style>
